<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!-- 插值 -->
    <p>{{ message }}</p><br/>

    <!-- html 标签 -->
    <p>{{msg_html}}</p><br/>
    <p v-html="msg_html"></p><br/>

    <!-- v-cloak 当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码,使用 v-cloak 指令来解决屏幕闪动的问题 -->
    <p v-cloak>{{message}}</p><br/>

    <!-- v-text 用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题 （如果数据中有HTML标签会将html标签一并输出 ）-->
    <p v-text="msg_html"></p><br/>

    <!-- v-bind 用于绑定数据和元素属性-->
    <a v-bind:href="url">百度</a><br/>
    <a :href="url">百度-1</a><br/>

    <!-- v-model 用户数据双向绑定 -->
    <p>{{message}}</p><br/>
    <input v-model="message"><br/>


    <!-- 监听器 -->
    监听器
    <p>{{msg | capitalize}}</p><br/>

    v-for循环<br/>
    <li v-for="s in sites">{{s.name}}</li>
    对象循环<br/>
    <li v-for="s in obj">{{s}}</li>
    对象循环k-v<br/>
    <li v-for="(v,k) in obj">{{k}}:{{v}}</li>
    对象循环key-value-i<br/>
    <li v-for="(value,key,index) in obj">{{index}}:{{key}}:{{value}}</li>

    v-for 迭代整数<br/>
    <li v-for="n in 10">{{n}}</li>

</div>
<br/>

<!-- v-on 用于绑定事件的, v-on:click.stop 可用于防止事件冒泡-->
<div id="app_on" v-on:click="divClick" style="width: 200px;height: 200px; background: #42b983">
    <input type="button" value="点我" v-on:click.stop="btnClick" width="40px">
</div>


<script>
    let v = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js 22!',
            msg_html: '<h3>Hell Vue.js html</h3>',
            url: 'http://www.baidu.com',
            msg: 'Hello world',
            sites: [{name: 'a'}, {name: 'b'}, {name: 'c'}],
            obj: {name: '百度', url: 'http://www.baidu.com', slogan: '学好技术，好好干'}
        },
        filters: {
            capitalize: function (value) {
                if (!value) return '';
                value = value.toString();
                value = value.charAt(0).toLowerCase() + value.slice(1);
                return value;
            }
        }
    });

    new Vue({
        el: '#app_on',
        methods: {
            btnClick: function () {
                console.log("btn click");
            },
            divClick: function () {
                console.log("div click");
            }
        }
    })

</script>
</body>
</html>